<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>IDC管理系统</title>
        <!-- 手机缩放/比例 -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!-- 默认的苹果工具栏和菜单栏 -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!-- 控制苹果状态栏显示样式 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!-- 阻止手机上手机号码邮箱地址识别 -->
        <meta name="format-detection" content="telephone=no, email=no"/>
        <!-- 定时刷新页面 -->
        <!-- <meta http-equiv="refresh" content="30"> -->
        <!-- 网页标题图标... -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/theme/win10/assets/img/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/public/theme/win10/assets/img/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/public/theme/win10/assets/img/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="/public/theme/win10/assets/img/ico/apple-touch-icon-57-precomposed.png">
        <link rel="icon" href="/public/theme/win10/assets/img/ico/favicon.ico" type="image/png">
        <!-- 页面iconfont -->
        <link href="/public/theme/win10/assets/css/icons.css" rel="stylesheet" />
        <!-- jQueryUI -->
        <link href="/public/theme/win10/assets/css/sprflat-theme/jquery.ui.all.css" rel="stylesheet" />
        <!-- Bootstrap3.0.0 3.7有变化-->
        <link href="/public/theme/win10/assets/css/bootstrap.css" rel="stylesheet" />
        <!-- 影响页面动画 (all plugin custom css) -->
        <link href="/public/theme/win10/assets/css/plugins.css" rel="stylesheet" />
        <!-- 框架核心样式 -->
        <link href="/public/theme/win10/assets/css/main.css" rel="stylesheet" />
        <!-- 自定义公用样式 -->
        <link href="/public/admin/css.css" rel="stylesheet" />
    </head>
    <body class="login-page">
        <!-- Start #login -->
        <div id="login" class="animated bounceIn">
            <img id="logo" src="/image/logo1.png" alt="IDC Logo">
            <!-- Start .login-wrapper -->
            <div class="login-wrapper">
                <ul id="myTab" class="nav nav-tabs nav-justified bn">
                    <li class="active">
                        <a href="#log-in" data-toggle="tab">登陆IDC管理系统</a>
                    </li>
                </ul>
                <div id="myTabContent" class="tab-content bn">
                    <div class="tab-pane fade active in" id="log-in">
                        <div class="social-buttons text-center mt10">
                            <a href="#" class="btn btn-primary btn-alt btn-round btn-lg mr10"><i class="fa-facebook s24"></i></a>
                            <a href="#" class="btn btn-primary btn-alt btn-round btn-lg mr10"><i class="fa-twitter s24"></i></a>
                            <a href="#" class="btn btn-danger btn-alt btn-round btn-lg mr10"><i class="fa-google-plus s24"></i></a>
                            <a href="#" class="btn btn-info btn-alt btn-round btn-lg"><i class="fa-linkedin s24"></i></a>
                        </div>
                        <div class="seperator">
                            <strong>IDCchain.co</strong>
                            <hr>
                        </div>
                        <form class="form-horizontal mt10" action="#" method="post" id="login-form" role="form">
                            {:token()}
                            <div class="form-group">
                                <div class="col-lg-12">
                                    <input type="text" name="uname" id="uname" class="form-control left-icon" placeholder="输入账号 ...">
                                    <i class="ec-user s16 left-input-icon"></i>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-lg-12">
                                    <input type="password" name="pwd" id="pwd" class="form-control left-icon" placeholder="输入密码 ...">
                                    <i class="ec-locked s16 left-input-icon"></i>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-lg-12">
                                    <div class="input-group">
                                        <input type="text" name="yzm" id="yzm" class="form-control left-icon" placeholder="输入验证码 ..." onclick="this.value=''">
                                        <span class="input-group-addon p0"><img style="height:32px;" src="{:url('publics/verify')}" alt="点击刷新" onclick="this.src='{:url(\'Publics/verify\')}'+'?t='+Math.random();"></span>
                                    </div>
                                    <i class="ec-images2 s16 left-input-icon" style="z-index: 2"></i>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-8">
                                    <!-- col-lg-12 start here -->
                                    <label class="checkbox">
                                        <input type="checkbox" name="autologin" id="autologin" value="1">7天自动登录
                                    </label>
                                </div>
                                <!-- col-lg-12 end here -->
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-4">
                                    <!-- col-lg-12 start here -->
                                    <button class="btn btn-success pull-right" type="submit">登陆</button>
                                </div>
                                <!-- col-lg-12 end here -->
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- End #.login-wrapper -->
        </div>
        <!-- End #login -->
        <!-- Javascripts -->
        <!-- Load pace first -->
        <script src="/public/theme/win10/assets/plugins/core/pace/pace.min.js"></script>
        <!-- Important javascript libs(put in all pages) -->
        <script src="/public/theme/win10/assets/js/jquery-1.8.3.min.js"></script>
        <script>
        window.jQuery || document.write('<script src="/public/theme/win10/assets/js/libs/jquery-2.1.1.min.js">\x3C/script>')
        </script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script>
        window.jQuery || document.write('<script src="/public/theme/win10/assets/js/libs/jquery-ui-1.10.4.min.js">\x3C/script>')
        </script>
        <!--[if lt IE 9]>
          <script type="text/javascript" src="/public/theme/win10/assets/js/libs/excanvas.min.js"></script>
          <script type="text/javascript" src="/public/chajian/html5.min.js"></script>
          <script type="text/javascript" src="/public/theme/win10/assets/js/libs/respond.min.js"></script>
        <![endif]-->
        <!-- Bootstrap plugins -->
        <script src="/public/theme/win10/assets/js/bootstrap/bootstrap.js"></script>
        <!-- Form plugins -->
        <script src="/public/theme/win10/assets/plugins/forms/icheck/jquery.icheck.js"></script>
        <script src="/public/theme/win10/assets/plugins/forms/validation/jquery.validate.js"></script>
        <script src="/public/theme/win10/assets/plugins/forms/validation/additional-methods.min.js"></script>
        <!-- Init plugins olny for this page -->
        <!-- <script src="/public/theme/win10/assets/js/pages/login.js"></script> -->
        <script>
            //------------- login.js -------------//
            $(document).ready(function() {

                //for custom checkboxes
                $('input').not('.noStyle').iCheck({
                    checkboxClass: 'icheckbox_flat-green'
                });

                //validate login form 
                $("#login-form").validate({
                    ignore: null,
                    ignore: 'input[type="hidden"]',
                    errorPlacement: function(error, element) {
                        wrap = element.parent();
                        wrap1 = wrap.parent();
                        if(wrap.hasClass('input-group')){
                            error.insertAfter(wrap);
                        } else if (wrap1.hasClass('checkbox')) {
                            error.insertAfter(wrap1);
                        } else {
                            if (element.attr('type')=='file') {
                                error.insertAfter(element.next());
                            } else {
                                error.insertAfter(element);
                            }
                        }
                    }, 
                    errorClass: 'help-block',
                    rules: {
                        uname: {
                            required: true,
                            minlength: 5
                        },
                        pwd: {
                            required: true,
                            minlength: 6
                        },
                        yzm: {
                            required: true,
                            minlength: 5,
                            maxlength: 5,
                        }
                    },
                    messages: {
                        pwd: {
                            required: "请输入密码",
                            minlength: "密码最少6位"
                        },
                        uname: {
                            required: "请输入用户名",
                            minlength: "用户名最少5位"
                        },
                        yzm: {
                            required: "请输入验证码",
                            minlength: "验证码为5位",
                            maxlength: "验证码为5位"
                        }
                    },
                    highlight: function(element) {
                        if($(element).parent().hasClass('input-group')){
                            $(element).offsetParent().parent().parent().removeClass('has-success').addClass('has-error');
                        } else if ($(element).offsetParent().parent().hasClass('form-group')) {
                            $(element).offsetParent().parent().removeClass('has-success').addClass('has-error');
                        } else {
                            if ($(element).attr('type')=='file') {
                                $(element).parent().parent().removeClass('has-success').addClass('has-error');
                            }
                            $(element).offsetParent().parent().parent().parent().removeClass('has-success').addClass('has-error');
                            
                        }
                    },
                    unhighlight: function(element,errorClass) {
                        if ($(element).offsetParent().parent().hasClass('form-group')) {
                            $(element).offsetParent().parent().removeClass('has-error').addClass('has-success');
                            $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
                        } else if ($(element).offsetParent().parent().hasClass('checkbox')) {
                            $(element).offsetParent().parent().parent().parent().removeClass('has-error').addClass('has-success');
                            $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
                        } else if ($(element).next().hasClass('bootstrap-filestyle')) {
                            $(element).parent().parent().removeClass('has-error').addClass('has-success');
                        }
                        else {
                            $(element).offsetParent().parent().parent().removeClass('has-error').addClass('has-success');
                        }
                    }
                });

            });
        </script>
    </body>
</html>